<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/login.css">
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css">
</head>

<body>

    <!-- 头部 -->



    <div id="head" style="width:100%;margin: 0 auto;"></div>
        <div style="width: 100%;margin: 0 auto;">
            <div id="login" style="margin: 0 auto;">
            <img src="https://www.suofeiya.com/Www/Public_1/images/login_bg.png" alt="">
            <div id="login-box">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">账号登录</li>
                        <li>手机快捷登录</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="yonghuming"><input id="username" type="text" placeholder="请输入手机号"></div>
                            <div id="mima"><input id="password" type="password" placeholder="请输入密码"></div>
                            <div id="xuanze"><input type="checkbox">
                                <p>记住用户名</p><span>忘记密码</span>
                            </div>
                            <button id="login-btn">马上登录</button>
                            <div id="zhuce"><a href="register.html">没有账号？去免费注册></a></div>

                        </div>


                    </div>
                </div>
            </div>

            </div>


    </div>
    <!-- 底部 -->
    <div id="foot" style="margin: 0 auto;"></div>



</body>
<script src="../src/lib/jquery-1.11.3.js"></script>
<script src="../src/lib/layui/layui.js" charset="utf-8"></script>
<script src="../src/js/login.js" type="module"></script>
<script>
    $('#head').load('../layout/head.html')
    $('#foot').load('../layout/foot.html')

</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>


</html>